<template>
	<view class="login-class">
		<view class="header">
			<view class="info">
				<image class="img" src="/static/image/mipmap-xhdpi/welcome.png" mode="aspectFit"></image>
				<text class="text">让浇灌更简单，让环境更美好</text>
			</view>
			<image class="backimg" src="/static/image/mipmap-xhdpi/pain.png" mode="aspectFit"></image>
		</view>
		<view class="content">
			<view class="logo">
				<image class="img" src="/static/image/mipmap-xhdpi/logo.png" mode=""></image>
			</view>
			<view class="login">
				<view class="username">
					<image class="img" src="/static/image/mipmap-xhdpi/user.png" mode=""></image>
					<input class="input" placeholder-class="login-placeholder" type="text" v-model="username" placeholder="请输入用户名" />
				</view>
				<view class="password">
					<image class="img" src="/static/image/mipmap-xhdpi/password.png" mode=""></image>
					<input class="input" password placeholder-class="login-placeholder" type="text" v-model="password" placeholder="请输入6-12位密码" />
				</view>
				<button class="button" type="default" @click="login">登&nbsp;&nbsp;录</button>
			</view>
		</view>
		<view class="footer">
			<image class="img" src="/static/image/mipmap-xhdpi/footer.png" mode="aspectFit"></image> 
			<text class="text"> | 持产品最终解释权</text>
		</view>
	</view>
</template>

<script>
	import xph from '@/common/xph.js'
	import {mapState, mapActions} from 'vuex';
	import config from "@/config/config.json"
	export default {
		data() {
			return {
				username: "",
				password: ""
			};
		},
		methods:{
			login() {
				let that = this
				if(!this.username){
					uni.showToast({
						title: "请输入用户名",
						icon: "none"
					})
					return;
				}
				if(!this.password){
					uni.showToast({
						title: "请输入用户名",
						icon: "none"
					})
					return;
				}
				xph.login(this.username, this.password).then((res)=>{
					if(!!res.data.token){
						that.setUserInfo({
							userId: res.data.userId,
							username: that.username,
							password: that.password,
							expiration: res.data.expiration,
							token: res.data.token,
						})
						console.log(this.user)
						xph.setDefaultToken(that.user.token)
						uni.setStorage({
							key: 'user',
							data: Object.assign({}, that.user),
							success(res) {
								console.log(res)
							},
							fail(e) {
								console.log(e)
							}
						})
						that.startTask()
						uni.switchTab({
							url: '../intelligent/intelligent',
							fail(e) {
								console.log("登录失败",e)
							}
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "error"
						})
					}
				})
				.catch(error =>{
					uni.showToast({
						title: "用户名或密码错误",
						icon: "error"
					})
				})
			},
			getRealData(){
				setInterval(async ()=>{
					this.freshDeviceReal()
				}, 61*1000)
			},
			startTask(){
				this.setDeviceInfo(this.user.username)
				this.getRealData()
				this.setIrrigationInfo(this.user)
			},
			...mapActions('user', ['setUserInfo']),
			...mapActions('irrigation', ['setIrrigationInfo']),
			...mapActions('device', ['setDeviceInfo', 'freshDeviceReal'])
		},
		computed:{
			...mapState(['user']),
			...mapState('device', ['devices'])
		},
		onShow() {
			const that = this;
			uni.getStorage({
				key: 'user',
				success(res) {
					console.log(res)
					that.setUserInfo(res.data);
					if(!!that.user.username){
						that.username = that.user.username
					}
					if(!!that.user.password){
						that.password = that.user.password
					}
					if(!!that.user.expiration && !!that.user.valid && that.user.valid > new Date().getTime()){
						xph.setDefaultToken(that.user.token)
						uni.switchTab({
							url: '../intelligent/intelligent',
							fail(e) {
								console.log("登录失败",e)
							}
						})
						that.startTask()
					}
				},
				fail(e) {
					console.log(e)
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.login-class{
	width: 750rpx;
	height: 1331.77rpx;
	background: url(~@/static/image/login_background.png) no-repeat center;
	background-size: cover;
	position: relative;
	.header{
		position: relative;
		border-bottom: 2px;
		border-bottom-color: #8CC2BB;
		.info{
			position: absolute;
			z-index: 10;
			left: 36.34rpx;
			top: 134.81rpx;
			.img{
				display: block;
				width: 392.73rpx;
				height: 103.16rpx;
			}
			.text{
				font-size: 28.13rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
			}
		}
		.backimg{
			position: absolute;
			left: 294.25rpx;
			top: 118.4rpx;
			width: 456.03rpx;
			height: 288.39rpx;
		}
	}
	.content{
		position: absolute;
		width: 622.5rpx;
		height: 732.7rpx;
		left: 71.51rpx;
		top: 472.45rpx;
		background: #299384;
		opacity: 0.7;
		border-radius: 10px;
		.logo{
			margin: -42.2rpx 0 0 35.16rpx;
			.img{
				background-color: #FFFFFF;
				width: 112.54rpx;
				height: 98.47rpx;
			}
		}
		.login{
			width: 505.27rpx;
			height: 218.06rpx;
			margin: 124.26rpx 0 0 66.82rpx;
			.username, .password{
				height: 50.41rpx;
				padding: 11.72rpx 23.44rpx;
				border: 1.17rpx solid #FFFFFF;
				border-radius: 29.3rpx;
				.img{
					width: 45.72rpx;
					height: 50.41rpx;
					display: inline-block;
				}
				.input{
					width: 375.14rpx;
					margin-left: 11.72rpx;
					display: inline-block;
					color: #FFFFFF;
					font-weight: 400;
					font-size: 25.79rpx;
				}
			}
			.username{
				margin-bottom: 93.78rpx;
			}
			.password{
				margin-bottom: 127.78rpx;
			}
			.login-placeholder{
				color: #FFFFFF;
				font-weight: 400;
				font-size: 25.79rpx;
			}
			.button{
				border-radius: 35.16rpx;
				color: #299384;
				font-size: 28.13rpx;
				font-weight: 400;
			}
		}
	}
	.footer{
		position: absolute;
		bottom: 31.65rpx;
		left: 105.5rpx;
		height: 23.44rpx;
		.img{
			vertical-align: middle;
			width: 351.69rpx;
			height: 46.89rpx;
		}
		.text{
			vertical-align: middle;
			font-size: 22rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #040404;
		}
	}
}
</style>
